<template>
    <view class="approval-list-container">
        <scroll-view
            scroll-y
            class="scroll-view"
            scroll-with-animation
            refresher-enabled
            :refresher-triggered="isPullRefresh"
            @refresherrefresh="refreshList"
            @scrolltolower="getApprovalList"
            enable-flex
        >
            <view class="approval-list" v-if="approvalList.length != 0">
                <view class="approval-item" @tap="toApprovalDetail" :data-item="item" v-for="(item, index) in approvalList" :key="index">
                    <view class="approval-item-top">
                        <view class="person-info">
                            <view class="avatar" v-if="item.avatar">
                                <image :src="item.avatar" mode="aspectFill" class="avatar" />
                            </view>
                            <view :class="'icon-container ' + (item.personType != '10' ? 'orange' : 'green')" v-else>
                                <icon type="icon-a-laowurenyuan1x" :size="56" v-if="item.personType != '10'" />
                                <icon type="icon-a-guanlirenyuan1x" :size="56" v-else />
                            </view>
                            <text class="person-name">{{ item.name }}</text>
                            <text class="work-type">{{ item.workTypeData }}</text>
                            <text v-if="approvalType == 1" class="state-text">{{ item.type == 1 ? '新增' : '修改' }}待审批</text>
                            <text v-if="approvalType == 2" class="state-text red">未通过</text>
                            <text v-if="approvalType == 3" class="state-text green">已通过</text>
                        </view>
                        <view class="org-info">组织机构：{{ item.workTeamName }}</view>
                        <view class="id-num">身份证号：{{ item.identityNumber }}</view>
                    </view>

                    <view class="approval-item-bottom">
                        <text class="create-time">提交时间：{{ item.submitTime }}</text>
                        <view class="change-state-container" v-if="item.workingStatus && item.oldWorkingStatus && item.workingStatus != item.oldWorkingStatus && approvalType == 1">
                            <text :class="'approval-state ' + (item.oldWorkingStatus == '2' ? 'red' : '') + ' ' + (item.oldWorkingStatus == '3' ? 'orange' : '')">
                                {{ item.oldWorkingStatusData }}
                            </text>
                            <image :src="rightArrowImg" class="change-icon" />
                            <text :class="'approval-state ' + (item.workingStatus == '2' ? 'red' : '') + ' ' + (item.workingStatus == '3' ? 'orange' : '')">
                                {{ item.workingStatusData }}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="no-more">没有更多了</view>
            </view>
            <view class="no-data-container" v-else>
                <no-data></no-data>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import noData from '@/components/common/no-data/no-data';
import { workingStatusList } from '../../../config/enum';
import moment from 'moment';
const app = getApp();
export default {
    components: {
        noData
    },
    data() {
        return {
            rightArrowImg: app.globalData.imgs.rightArrowImg,
            approvalList: [],
            pageNum: 1,
            pageSize: 20,
            isPullRefresh: false,
            noMore: false,
            workingStatusList
        };
    },
    props: {
        approvalType: {
            type: Number
        },
        isRejectList: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        refreshList() {
            this.setData({
                pageNum: 1,
                noMore: false,
                approvalList: [],
                isPullRefresh: false
            });
            this.getApprovalList();
        },
        handleWorkTypeName(item) {
            if (item.personType) {
                if (item.personType == '10') {
                    return '管理人员';
                } else if (item.personType == '30') {
                    return '班组长';
                }
            }
            return item.worktypeName;
        },
        handleWorkingStatus(workingStatus) {
            for (let item of this.workingStatusList) {
                if (item.code == workingStatus) {
                    return item.value;
                }
            }
            return;
        },
        getApprovalList() {
            if (this.isRejectList) {
                //人员登记未通过列表
                this.getListPageApprovalReject();
            } else {
                //获取审批列表
                this.getListPageExamine();
            }
        },
        getListPageApprovalReject() {
            if (this.noMore) {
                return;
            }
            app.globalData.apis.roster
                .listPageApprovalReject({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum
                })
                .then(
                    (res) => {
                        let approvalList = res.data || [];
                        for (let item of approvalList) {
                            item.submitTime = item.createTime ? moment(item.createTime).format('YYYY/MM/DD HH:mm') : '';
                            item.workingStatusData = this.handleWorkingStatus(item.workingStatus);
                            item.oldWorkingStatusData = this.handleWorkingStatus(item.oldWorkingStatus);
                            item.workTypeData = this.handleWorkTypeName(item);
                        }
                        this.setData({
                            approvalList: this.approvalList.concat(approvalList),
                            noMore: this.pageSize > approvalList.length,
                            pageNum: (this.pageNum += 1),
                            isPullRefresh: false
                        });
                    },
                    () => {
                        this.setData({
                            isPullRefresh: false,
                            noMore: false
                        });
                    }
                );
        },
        getListPageExamine() {
            if (this.noMore) {
                return;
            }
            app.globalData.apis.roster
                .listPageExamine({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    status: this.approvalType
                })
                .then(
                    (res) => {
                        let approvalList = res.data || [];
                        for (let item of approvalList) {
                            item.submitTime = item.createTime ? moment(item.createTime).format('YYYY/MM/DD HH:mm') : '';
                            item.workingStatusData = this.handleWorkingStatus(item.workingStatus);
                            item.oldWorkingStatusData = this.handleWorkingStatus(item.oldWorkingStatus);
                            item.workTypeData = this.handleWorkTypeName(item);
                        }
                        this.setData({
                            approvalList: this.approvalList.concat(approvalList),
                            noMore: this.pageSize > approvalList.length,
                            pageNum: (this.pageNum += 1),
                            isPullRefresh: false
                        });
                    },
                    () => {
                        this.setData({
                            isPullRefresh: false,
                            noMore: false
                        });
                    }
                );
        },
        toApprovalDetail(e) {
            const item = e.currentTarget.dataset.item;
            if (item.nationality.code != 'CHN') {
                app.globalData.message.toast('外籍人员信息请在系统App或Web端查看');
                return;
            }
            let url;
            if (this.isRejectList) {
                url = `/pages/roster/approval/approvalDetail/approvalDetail?uuid=${item.uuid}&type=${item.type}&approvalType=${this.approvalType}&isReject=true`;
            } else {
                url = `/pages/roster/approval/approvalDetail/approvalDetail?uuid=${item.uuid}&type=${item.type}&approvalType=${this.approvalType}`;
            }
            uni.navigateTo({
                url
            });
        }
    },
    created: function () {}
};
</script>
<style>
.approval-list-container {
    width: 100vw;
    height: 100%;
    background-color: #f6f7fa;
    display: flex;
    flex-direction: column;
}

.scroll-view {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
}

.approval-list {
    padding: 24rpx;
}

.approval-item {
    background: #ffffff;
    box-shadow: 0px 0px 16rpx 0px rgba(160, 160, 160, 0.1);
    border-radius: 16rpx;
    margin-bottom: 24rpx;
}

.approval-item:last-child {
    margin-bottom: 0;
}

.approval-item .approval-item-top {
    padding: 30rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #e1e2e7;
}

.approval-item-top .person-info {
    display: flex;
    align-items: center;
}

.person-info .avatar {
    flex-shrink: 0;
    width: 56rpx;
    height: 56rpx;
    border-radius: 8rpx;
}

.icon-container {
    width: 56rpx;
    height: 56rpx;
    border-radius: 8rpx;
}

.icon-container.green {
    background-color: #00c467;
}

.icon-container.orange {
    background-color: #ff9544;
}

.person-info .person-name {
    font-size: 34rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #1e253f;
    word-break: break-all;
    margin-left: 24rpx;
    margin-right: 14rpx;
    text-align: justify;
}

.person-info .work-type {
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 40rpx;
    max-width: 200rpx;
    background: #eff1f6;
    border-radius: 6rpx;
    padding: 0 16rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b5680;
    margin-right: 12rpx;
    word-break: break-all;
}

.person-info .state-text {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #3f64fa;
}

.person-info .red {
    color: #ff555c;
}

.person-info .green {
    color: #12c361;
}

.approval-item-top .org-info,
.approval-item-top .id-num {
    margin-top: 24rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1e253f;
    text-align: justify;
}

.approval-item-top .id-num {
    color: #4b5680;
}

.approval-item-bottom {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx 24rpx 32rpx;
}

.approval-item-bottom .create-time {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #949dbf;
}

.change-state-container {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.change-state-container .approval-state {
    width: 80rpx;
    height: 40rpx;
    background: #e5f8ee;
    border-radius: 6rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #15bd63;
    text-align: center;
    line-height: 40rpx;
}

.change-state-container .orange {
    background: #fff4eb;
    color: #ff7f16;
}

.change-state-container .red {
    background: rgba(255, 65, 85, 0.1);
    color: #ff4155;
}

.change-state-container .change-icon {
    width: 32rpx;
    height: 32rpx;
    margin: 0 4rpx;
}

.no-more {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #949dbf;
    text-align: center;
}

.no-data-container {
    height: 100%;
}
</style>
